<!-- <template>
	<view class="contain">
		<time-Zone>
			<view class="group_contain" slot="content">
				<view class="frineds_font">
					您的好友 <text style="color: #FDEFB2;">颤三</text> 正再发起拼团！
				</view>
				<view class="friend_header">
					<view class="">
						已成功拼团:
					</view>
					<view class="header">
						<view class="header_item" v-for="n in 3">
							<image src="@/static/image/header.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<view class="group_contain" slot="content">
				<view class="frineds_font">
					恭喜您,发起拼团成功！
				</view>
				<view class="friend_header">
					<view class="">
						请将本页面分享给朋友，达到3人，拼团成功！
					</view>
				</view>
			</view>
		</time-Zone>
		<view class="section">
			<view class="nav_cont">
					<view class="nav_title">
						<view class="nav_font" v-for="(item,index) of nav_list"  :key='index' @tap="nav_click(index)">
							<text :class="navIndex==index ?'font_item' : null">{{item}}</text>
						</view>
					</view>
					<view class="collect">
						<u-icon name="star-fill" color="#F8321D" size="32"></u-icon>
						<text style="font-size: 28rpx;margin-left:5rpx">收藏</text>
						
					</view>
				</view>
				<view class="img_cont">
					<swiper class="good_swiper" :autoplay="true" :interval="3000" :duration="1000">
						<swiper-item>
							<view class="swiper-item">
								<image src="@/static/image/banner2.png" mode="" class="good_img"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
			<view class="goods_contain">
				<view class="share_column" :style="share==true ? 'transform:translateX(0) ' : 'transform:translateX(-230rpx)'" @tap="shareOpen()">
					<view class="share">
						分享赚 ￥ 1.20 <view class="shareBtn" @tap.native.stop="shareTo()">分享</view>
					</view>
					<view class="group">
						拼团价 ￥ 12.20 <view class="shareBtn"  @tap.native.stop="shareTo()">去拼</view>
					</view>
				</view>
				<view class="good_info_cont">
					<view class="good_title">
						{{detail.name}}
					</view>
					<view class="callcont">
						<view class="call">
							{{detail.desc}}
						</view>
						
					</view>
				</view>
				<view class="good_type_cont">
					<view class="type_item" v-for="(item,index) of good_type" :key = "index">
						<view class="type_title">
							{{item.type}}
						</view>
						<view 
						:class="item.selected == idx?'good_type':'good_type_selected'
						"v-for="(items,idx) of item.type_selec"
						:key="idx" 
						@tap="selectType(index,idx)"
						>
							{{items}}
						</view>
					</view>
				</view>
				<view class="goods_show" v-for="n of 5">
					<view class="goods_item">
						
					</view>
					
				</view>
			</view>
		</view>
		
	
	<view class="footer">
		<view class="footTop">
			<view class="totalprice">
				<view class="price">
					<view class="price_num">
						￥{{detail.price|Int }}.<text style="font-size: 24rpx;">{{detail.price|duts}}</text>
					</view>
					<text class="subTitle">{{detail.label}}</text>
				</view>
			</view>
			<view class="add_tool">
				<u-icon name="minus-circle" size="57" color="#EAEAEA"></u-icon>
				<view class="good_num">
					0
				</view>
				<u-icon name="plus-circle" size="57" color="#EAEAEA"></u-icon>
			</view>
			
		</view>
		<view class="foot_bottom">
			<view class="count">
				优惠： <text style="color: #000000;">当前购物车</text> 已优惠 
				<text class="price_Int">￥300.</text>
				<text class="price_float">00</text>
			</view>
			<view class="toDetail">
				查看优惠详情
				<u-icon name="arrow-right" size="24" color="#BFBFBF"></u-icon>
			</view>
			
		</view>
	<submitBar></submitBar>
	</view>
		
	</view>
</template>

<script>
	import timeZone from '@/plugins/timeZone/timeZone.vue'
	export default {
		components:{
			timeZone
		},
		data() {
			return {
				nav_list:['产品','评价'],
				navIndex:0,
				pageType:1,
				share:false,
				good_type:[
					{
						type:"温度",
						"selected":0,
						type_selec:["冰","常温"],
							
					},
					{
						type:"糖度",
						"selected":0,
						type_selec:["泉塘","半糖"],
							
					}
				],
				detail:{
					name:"史密斯（A,O,Smith）16升热水器",
					desc:"热销榜单描述描述描述",
					price:4300.28,
					label:"使用说明测试测试"
					
				}
			}
		},
		methods: {
			nav_click(index){
				this.navIndex=index
			},
			selectType(index,idx){
				this.good_type[index].selected = idx
			},
			shareOpen(){
				var isShare = this.share
				this.share = !isShare
			},
			shareTo(){
				if(this.share){
					console.log('进行分享')
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	$padboth:30rpx;
	$topspace:20rpx;
	$footTop:170rpx;
	page{
		display: flex;
		box-sizing: border-box;
		height: 100%;
	}
	.contain{
		display: flex;
		background-color: #F5F5F5;
		flex-direction: column;
		height: 100%;
		.section{
			flex: 1;
			overflow: auto;
		}
		.group_contain{
			font-size: 30rpx;
			box-sizing: border-box;
			padding-left: $padboth;
			color: #fff;
			.frineds_font{
				margin-bottom: 15rpx;
			}
			.friend_header{
				display: flex;
				align-items: center;
				.header{
					display: flex;
					position: relative;
					margin-left: 10rpx;
					.header_item{
						height: 70rpx;
						width: 70rpx;
						position: relative;
						margin-right: -10rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
		.nav_cont{
			width: 100%;
			height: 90rpx;
			background: #fff;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			padding: 26rpx 38rpx 0 32rpx;
			.nav_title{
				height: 100%;
				display: flex;
				margin-right: 26rpx;
				color: #686867;
				font-size: 28rpx;
				.nav_font{
					margin-right: 26rpx;
					.font_item{
						border-bottom: 2px solid gold;
						font-weight: 700;
						color: #000;
					}
				
					
				}
			}
			.collect{
				height: 100%;
				color: #F8321D;
			}
		}
		.img_cont{
			width: 100%;
			height: 304rpx;
			background-color: pink;
			.good_swiper{
				height:100%;
				width:100%;
				.swiper-item{
					height: 100%;
					width: 100%;
				.good_img{
					width: 100%;
					height: 100%;
				}
				}
			}
			
		}
		.goods_contain{
			display: flex;
			flex-direction: column;
			width: 100%;
			
			margin-top: $topspace;
			box-sizing: border-box;
			padding: 0 $padboth  $padboth;
			.share_column{
				position: fixed;
				bottom: 440rpx;
				left: 0;
				right: 0;
				width: 350rpx;
				transition:1000;
				transform: translateX(-230rpx);
				.share,.group{
					height: 80rpx;
					width: 334rpx;
					border-radius: 0 40rpx 40rpx 0;
					color: #FFFFFF;
					font-size: 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 10rpx 0;
					padding:0 12rpx;
				}
				.share {
					background: #4863EA;
					.shareBtn{
						color:#4863EA ;
					}
				}
				.group{
					background-color: #F8321D;
					.shareBtn{
						color:#F8321D ;
					}
				}
				.shareBtn{
					background-color: #fff;
					padding: 12rpx 20rpx;
					border-radius: 40rpx;
					margin-left: 17rpx;
				}
			}
			.good_info_cont{
				width: 100%;
				height:120rpx;
				background-color: #fff;
				box-sizing: border-box;
				padding: 23rpx 23rpx 32rpx;
				.good_title{
					font-size: 28rpx;
					font-weight: 700;
				}
				.callcont{
					width: 100%;
					margin-top: 15rpx;
					display: flex;
					
				
					.call{
						font-size: 20rpx;
						display: flex;	
						border-radius: 10px;
						height: 30rpx;
						margin-right: 8rpx;
						color: #909190;
					
					}
				}
			}
			.good_type_cont{
				width: 100%;
				margin-top: $topspace;
				background: #fff;
				display: flex;
				flex-direction: column;
				padding: 0rpx 23rpx 32rpx ;
				box-sizing: border-box;
				.type_item{
					display: flex;
					width: 100%;
					height: 100%;
					align-items: center;
					margin-top: 24rpx;
					.type_title{
						color: #5B5959;
						font-size: 27rpx;
						margin-right: 17rpx;
						height: 100%;
						display: flex;
						align-items: center;
					}
					.good_type{
						margin-left: 19rpx;
						width: 143rpx;
						height: 51rpx;
						text-align: center;
						border-radius: 20px;
						line-height:51rpx;
						font-size: 24rpx;
						color: #4863EA;
						border:1px solid #4863EA
					}
					.good_type_selected{
							margin-left: 19rpx;
							width: 143rpx;
							height: 51rpx;
							text-align: center;
							border-radius: 20px;
							line-height:51rpx;
							font-size: 24rpx;
							color: #5B5959;
							background-color: #F5F5F5;
					}
				}
				
			}
			.goods_show{
				background-color: #fff;
				margin-top: $topspace;
				display: flex;
				flex-direction: column;
				box-sizing: border-box;
				padding: 40rpx 30rpx 32rpx 26rpx;
				.goods_item{
					background-color: pink;
					width: 100%;
					margin-bottom: 22rpx;
					height: 300rpx;
				}
			}
		}
		.footer{
			width: 100%;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			background-color: #FBF8E4;
		
			.footTop{
				width: 100%;
				height: 50%;
				display: flex;
				box-sizing: border-box;
				justify-content: space-between;
				padding: 28rpx $padboth 0;
				.totalprice{
					height: 100%;
					.price{
						font-size: 34rpx;
						font-weight: 900;
						height: 100%;
						color: #F8321D;
						display: flex;
						
						flex-direction: column;
						.subTitle{
							font-size: 20rpx;
							color: #999999;
							margin-top: 5rpx;
						}
					}
				}
				.add_tool{
					display: flex;
					height: 42rpx;
					width: 161rpx;
					position: relative;
					border: 3px solid #EAEAEA;
					border-left: none;
					border-right: none;
					background-color: #FFFFFF;
					line-height: 42rpx;
					text-align: center;
					border-radius:40rpx;
					u-icon{
						position:absolute;
						top: -8rpx;
						&:first-child{
							left: -5rpx;
						}
						&:last-child{
							right: -5rpx;
						}
					}
					.good_num{
						margin:0 24rpx;
						width:100%;
						text-align: center;
					}
				}
				
			}
			.foot_bottom{
			
				padding:  $padboth ;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				height: 50%;
				.count{
					font-size: 27rpx;
					color: #666666;
					.price_Int{
						color: #F8321D;
					}
					.price_float{
						color: #f8321D;
						font-size: 24rpx;
					}
				}
				.toDetail{
					font-size: 24rpx;
					color: #f8321D;
					margin-left: 22rpx;
				}
			}
		}
	}
</style>
 -->
<template>
	<view class="productDetail">

		<view class="nav_cont">
			<view class="nav_title">
				<view class="nav_font" v-for="(item,index) of nav_list" :key='index' @tap="nav_click(index)">
					<text :class="navIndex==index ?'font_item' : null">{{item}}</text>
				</view>
			</view>

		</view>


		<!-- 轮播图 -->
		<Swiper-List :bannerList="product.banner" :height="750"></Swiper-List>
		<!-- 价格标题 -->
		<view class="title-wrapper">
			<view class="title_cont">
				<view class="name">{{ product.title }} </view>
				<view class="collect">
					<u-icon name="heart" color="#999999" size="28"></u-icon>
					<text>收藏</text>

				</view>
			</view>

			<view class="sub">{{ product.desc }}</view>
			<view class="price-content">
				<text class="sign">¥</text>
				<text class="price">{{ parseFloat(product.price).toFixed(2)}}</text>
				<text class="original_price">{{"￥"+(product.original).toFixed(2)}}</text>
			</view>
		</view>
		<!-- 促销 -->
		<view class="discount">
			<text class="title">商品参数</text>
			<text class="content">{{ product.parameter }}</text>
			<view class="right-icon">
				<u-icon name="more-dot-fill" size="30" color="#333333"></u-icon>
			</view>
		</view>
		<!-- 规格 -->
		<view class="guige-wrapper">
			<view class="item-wrapper" @tap="toggleSpec">
				<text class="title">商品规格</text>
				<text class="content">{{ selectshop.id ? "已选:" +selectArr.join(' ') : '请选择规格'  }}</text>
				<view class="right-icon">
					<u-icon name="more-dot-fill" size="30" color="#333333"></u-icon>
				</view>
			</view>
			<!-- 	<view class="item-wrapper">
 				<text class="title">运费</text>
 				<text class="content">{{ product.freight }}</text>
 			</view> -->
		</view>

		<!--商品详情  -->
		<view class="detail-wrapper">
			<view class="title">商品详情</view>
			<view class="content">
				<image class="product-detail-img" mode="widthFix" lazy-load="true" :src="product.details"></image>
			</view>

		</view>
		<!-- 底部footer -->

		<!-- sku弹出层 -->
		<view class="popup" catchtouchmove="true" :class="specClass" @touchmove.stop.prevent="moveHandle">
			<view class="mask"></view>
			<view class="layer attr-content">
				<view class="specification-wrapper">
					<scroll-view class="specification-wrapper-content" scroll-y="true">
						<view class="specification-header">
							<view class="specification-left">
								<image class="product-img"></image>
							</view>
							<view class="specification-right">
								<view class="price-title">
									{{ product.title }}
								</view>
								<view class="price-content">
									<text class="sign">¥</text>
									<text class="price">{{ selectshop.price || 0 }}</text>
								</view>
							</view>
						</view>
						<view class="specification-content">
							<view class="specification-item" v-for="(item, index1) in specifications" :key="index1">
								<view class="item-title">{{ item.name }}</view>
								<view class="item-wrapper">
									<view class="item-content" @tap="skuClick(item_value, index1, $event, index2)" v-for="(item_value, index2) in item.item"
									 :key="index2" :class="[item_value.ishow ? '' : 'noactived', subIndex[index1] == index2 ? 'actived' : '']">
										{{ item_value.name }}
									</view>
								</view>
							</view>
							<view class="specification-item">
								<view class="item-title">数量</view>
								<view class="item-wrapper">
									<stepper size="small" :min="1" :max="selectshop.stock" :defaultValue="selectNum" :display="canCount" @change="changeNum"></stepper>
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="close" @tap="closeSf">
						<u-icon name="close"></u-icon>
					</view>
				</view>
				<view class="btn-wrapper"><button class="sure" @click="sure">确定</button></view>
			</view>
		</view>
		<view class="footer-wrapper">
			<submitBar></submitBar>
		</view>

	</view>
</template>

<script>
	import SwiperList from '@/components/other/swiperList.vue';
	import stepper from '@/components/other/stepper.vue';


	export default {
		components: {
			SwiperList,
			stepper
		},
		data() {
			return {
				nav_list: ['产品', '评价'],
				navIndex: 0,
				pageType: 1,
				product: {
					"banner": [{
							"Imgid": 1,
							"src": "/static/image/detail_item.png"
						},
						{
							"Imgid": 2,
							"src": "http://dummyimage.com/750x750"
						},
						{
							"Imgid": 3,
							"src": "http://dummyimage.com/750x750"
						}
					],
					"pid": 0,
					"title": "还她并响强调发克门老于规自示月按段任支象自音中由长。",
					"desc": "罗云熙同款 99%的杀菌率 安心放心选购",
					"price": 55.6,
					"parameter": "第一件9折，第二件8折，第三件7折，第一件9折，第二件8折，第三件7折",
					"original": 3000.00,
					"details": "/static/image/good_details.png"
				},
				showSet: false,
				specClass: 'none',
				specifications: [{
						"name": "尺寸",
						"item": [{
								"name": "100"
							},
							{
								"name": "200"
							}
						]
					},
					{
						"name": "颜色",
						"item": [{
								"name": "白色"
							},
							{
								"name": "黑色"
							},
							{
								"name": "绿色"
							}
						]
					},
					{
						"name": "码数",
						"item": [{
								"name": "X"
							},
							{
								"name": "L"
							},
							{
								"name": "XL"
							}
						]
					},
					{
						"name": "款式",
						"item": [{
								"name": "豪华"
							},
							{
								"name": "大众"
							},
							{
								"name": "低调"
							}
						]
					}
				], //spu规格列表
				difference: [{
						"id": "19",
						"price": 200,
						"stock": 19,
						"difference": [
							"100",
							"白色",
							"X",
							"豪华"
						]
					},
					{
						"id": "21",
						"price": 300,
						"stock": 10,
						"difference": [
							"100",
							"黑色",
							"XL",
							"低调"
						]
					},
					{
						"id": "23",
						"price": 500,
						"stock": 48,
						"difference": [
							"100",
							"绿色",
							"X",
							"豪华"
						]
					},
					{
						"id": "20",
						"price": 300,
						"stock": 29,
						"difference": [
							"200",
							"白色",
							"XL",
							"大众"
						]
					},
					{
						"id": "22",
						"price": 300,
						"stock": 200,
						"difference": [
							"200",
							"黑色",
							"L",
							"豪华"
						]
					}
				], //sku列表
				shopItemInfo: {}, //存放要和选中的值进行匹配的数据
				selectArr: [], //存放被选中的值
				subIndex: [], //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
				selectshop: {}, //存放最后选中的商品
				selectNum: 1 //选中数量
			};
		},
		computed: {
			canCount() {
				return this.subIndex.some(item => item === -1);
			}
		},
		onLoad() {
			console.log(products);
			console.log(skuList);
			console.log(specList);

			this.specifications.map(item => {
				this.selectArr.push('');
				this.subIndex.push(-1);
			});
			this.checkItem(); //计算sku里面规格形成路径
			this.checkInpath(-1); //传-1是为了不跳过循环
			// this.getData(1);
		},
		methods: {
			//顶部导航栏选择

			sure() {
				console.log(JSON.stringify(this.selectshop))
			},
			nav_click(index) {
				this.navIndex = index
			},
			skuClick(value, index1, event, index2) {
				if (value.ishow) {
					if (this.selectArr[index1] != value.name) {
						this.$set(this.selectArr, index1, value.name);
						this.$set(this.subIndex, index1, index2);
					} else {
						this.$set(this.selectArr, index1, '');
						this.$set(this.subIndex, index1, -1);
					}
					this.checkInpath(index1);
					//如果全部选完
					if (this.selectArr.every(item => item != '')) {
						this.selectshop = this.shopItemInfo[this.selectArr];
						this.selectNum = 1;
					}
				}
			},
			checkInpath(clickIndex) {
				// console.time('筛选可选路径需要的时间是');
				//循环所有属性判断哪些属性可选
				//当前选中的兄弟节点和已选中属性不需要循环

				for (let i = 0, len = this.specifications.length; i < len; i++) {
					if (i == clickIndex) {
						continue;
					}
					let len2 = this.specifications[i].item.length;
					for (let j = 0; j < len2; j++) {
						if (this.subIndex[i] != -1 && j == this.subIndex[i]) {
							continue;
						}
						let choosed_copy = [...this.selectArr];
						this.$set(choosed_copy, i, this.specifications[i].item[j].name);
						let choosed_copy2 = choosed_copy.filter(item => item !== '' && typeof item !== 'undefined');
						if (this.shopItemInfo.hasOwnProperty(choosed_copy2)) {
							this.$set(this.specifications[i].item[j], 'ishow', true);
						} else {
							this.$set(this.specifications[i].item[j], 'ishow', false);
						}
					}
				}
				// console.log(this.specifications)
				// console.timeEnd('筛选可选路径需要的时间是');
			},
			checkItem() {
				// console.time('计算有多小种可选路径需要的时间是');
				//计算有多小种可选路径
				let result = this.difference.reduce(
					(arrs, items) => {
						return arrs.concat(
							items.difference.reduce(
								(arr, item) => {
									return arr.concat(
										arr.map(item2 => {
											//利用对象属性的唯一性实现二维数组去重
											if (!this.shopItemInfo.hasOwnProperty([...item2, item])) {
												this.shopItemInfo[[...item2, item]] = items;
											}
											return [...item2, item];
										})
									);
								},
								[
									[]
								]
							)
						);
					},
					[
						[]
					]
				);
				// console.timeEnd('计算有多小种可选路径需要的时间是');
			},

			//规格弹窗开关
			toggleSpec() {
				this.specClass = 'show';
			},
			moveHandle() {
				//禁止父元素滑动
			},
			closeSf() {
				this.specClass = 'hide';
				setTimeout(() => {
					this.specClass = 'none';
				}, 250);
			},
			changeNum(val) {
				this.selectNum = parseInt(val);
			}
		}
	};
</script>

<style lang="less">
	page {
		background-color: #f4f4f4;
	}

	.nav_cont {
		width: 100%;
		height: 90rpx;
		background: #fff;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		padding: 26rpx 38rpx 0 32rpx;

		.nav_title {
			height: 100%;
			display: flex;
			margin-right: 26rpx;
			color: #686867;
			font-size: 28rpx;

			.nav_font {
				margin-right: 26rpx;

				.font_item {
					border-bottom: 2px solid #E02E24;
					font-weight: 700;
					color: #E02E24;
				}


			}
		}

	}

	.productDetail {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 666;
		overflow: scroll;
		padding-bottom: 120rpx;

		.title-wrapper {
			padding: 40rpx 25rpx;
			background-color: #fff;
			margin-bottom: 20rpx;

			.title_cont {
				display: flex;

				.collect {
					height: 100%;
					color: #999999;
					flex: 1;
					font-size: 24rpx;
					display: flex;
					align-items: center;
				}
			}


			.price-content {
				color: #fe3a3a;
				margin-bottom: 20rpx;

				.sign {
					font-size: 28rpx;
				}

				.price {
					font-size: 34rpx;
					font-weight: 900;
				}

				.original_price {
					font-size: 28rpx;
					color: #999999;
					text-decoration: line-through;
					margin-left: 15rpx
				}
			}

			.name {
				width: 85%;
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				line-height: 40rpx;
				word-break: break-word; //换行模式
				height: 40rpx;
				overflow: hidden;
				text-overflow: ellipsis; //修剪文字
				display: -webkit-box;
				-webkit-line-clamp: 1; //此处为上限行数
				-webkit-box-orient: vertical;
				margin-right: 28rpx;
			}

			.sub {
				font-size: 24rpx;
				color: #999999;
				word-break: break-word; //换行模式
				height: 40rpx;
				overflow: hidden;
				text-overflow: ellipsis; //修剪文字
				display: -webkit-box;
				-webkit-line-clamp: 1; //此处为上限行数
				-webkit-box-orient: vertical;
				color: #999999;
			}
		}

		.discount {
			display: flex;
			width: 100%;
			flex-direction: row;
			padding: 35rpx 25rpx;
			font-size: 26rpx;
			box-sizing: border-box;
			background-color: #fff;
			margin-bottom: 20rpx;

			.title {
				font-weight: bold;
				margin-right: 35rpx;
			}

			.content {
				flex: 1;
				line-height: 40rpx;
				font-weight: 500;
				margin-right: 26rpx;
				word-break: break-word; //换行模式
				height: 40rpx;
				overflow: hidden;
				text-overflow: ellipsis; //修剪文字
				display: -webkit-box;
				-webkit-line-clamp: 1; //此处为上限行数
				-webkit-box-orient: vertical;
				color: #999999;
			}
		}

		.guige-wrapper {
			.item-wrapper {
				display: flex;
				width: 100%;
				height: 95rpx;
				align-items: center;
				flex-direction: row;
				padding: 0 25rpx;
				font-size: 26rpx;
				box-sizing: border-box;
				background-color: #fff;
				border-bottom: 1rpx solid #dadada;

				&:last-child {
					border-bottom: 0;
					margin-bottom: 20rpx;
				}

				.title {
					font-weight: bold;
					margin-right: 35rpx;
				}

				.content {
					flex: 1;
					margin-right: 26rpx;
					word-break: break-word; //换行模式
					height: 40rpx;
					overflow: hidden;
					text-overflow: ellipsis; //修剪文字
					display: -webkit-box;
					-webkit-line-clamp: 1; //此处为上限行数
					-webkit-box-orient: vertical;
					color: #999999;
				}


			}
		}



		.detail-wrapper {
			margin-bottom: 20rpx;
			background-color: #fff;

			.title {
				width: 100%;
				height: 94rpx;
				line-height: 94rpx;
				padding: 0 26rpx;
				font-size: 26rpx;
				font-weight: bold;
				color: #333333;
				box-sizing: border-box;
			}

			.content {
				font-size: 0; //把空白字符去掉
				width: 100%;
				box-sizing: border-box;
				padding: 0 26rpx;

				.product-detail-img {
					width: 100%;
					height: auto;
				}
			}
		}

		.footer-wrapper {
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 666;
			width: 100%;
		}

		.set-wrapper {
			position: fixed;
			top: 180rpx;
			right: 26rpx;
			z-index: 3;

			.set-content {
				position: relative;
				width: 234rpx;
				height: 185rpx;
				background-color: #000;
				opacity: 0.7;
				border-radius: 10rpx;

				&::before {
					content: '';
					position: absolute;
					top: -14rpx;
					right: 13rpx;
					width: 0;
					border-width: 0 14rpx 14rpx 14rpx;
					border-style: solid;
					border-color: transparent transparent #000 transparent;
				}

				.set-item {
					display: flex;
					width: 100%;
					height: 92rpx;
					border-bottom: 1rpx solid #dadada;
					align-items: center;
					padding: 0 26rpx;
					box-sizing: border-box;

					&:last-child {
						border-bottom: 0;
					}

					.icon {
						width: 40rpx;
						height: 40rpx;
						margin-right: 14rpx;
						background-color: #ffffff;
					}

					.title {
						font-size: 28rpx;
						color: #ffffff;
						font-weight: 500;
						margin-right: 50rpx;
					}

					.dorp {
						width: 16rpx;
						height: 16rpx;
						background-color: #fd3144;
						border-radius: 50%;
					}
				}
			}
		}

		/*  弹出层 */
		.popup {
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			z-index: 999;
			overflow: hidden;

			&.show {
				display: block;

				.mask {
					animation: showPopup 0.2s linear both;
				}

				.layer {
					animation: showLayer 0.2s linear both;
				}
			}

			&.hide {
				.mask {
					animation: hidePopup 0.2s linear both;
				}

				.layer {
					animation: hideLayer 0.2s linear both;
				}
			}

			&.none {
				display: none;
			}

			.mask {
				position: fixed;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: 1;
				background-color: rgba(0, 0, 0, 0.3);
			}

			.layer {
				display: flex;
				width: 100%;
				// height: 1014rpx;
				flex-direction: column;
				// min-height: 40vh;
				// max-height: 1014rpx;
				position: fixed;
				z-index: 99;
				bottom: 0;
				border-radius: 10upx 10upx 0 0;
				background-color: #fff;

				.specification-wrapper {
					width: 100%;
					padding: 30rpx 25rpx;
					box-sizing: border-box;

					.specification-wrapper-content {
						width: 100%;
						max-height: 900rpx;
						min-height: 600rpx;

						&::-webkit-scrollbar {
							/*隐藏滚轮*/
							display: none;
						}

						.specification-header {
							width: 100%;
							display: flex;
							flex-direction: row;
							position: relative;
							margin-bottom: 40rpx;

							.specification-left {
								width: 180rpx;
								height: 180rpx;
								flex: 0 0 180rpx;

								.product-img {
									width: 180rpx;
									height: 180rpx;
									background-color: #999999;
								}
							}

							.specification-right {
								flex: 1;
								padding: 16rpx 35rpx 0 28rpx;
								box-sizing: border-box;
								display: flex;
								flex-direction: column;
								font-weight: 500;

								.price-title {
									font-size: 32rpx;
									font-weight: 900;
								}

								.price-content {
									margin-top: 22rpx;
									color: #fe3a3a;
									margin-bottom: 20rpx;
									font-weight: 900;

									.sign {
										font-size: 28rpx;
									}

									.price {
										font-size: 32rpx;
									}
								}

								.inventory {
									font-size: 24rpx;
									color: #999999;
									margin-bottom: 14rpx;
								}

								.choose {
									font-size: 28rpx;
									color: #333333;
								}
							}
						}

						.specification-content {
							font-weight: 500;

							.specification-item {
								margin-bottom: 40rpx;

								&:last-child {
									margin-bottom: 0;
								}

								.item-title {
									margin-bottom: 20rpx;
									font-size: 28rpx;
									color: #999999;
								}

								.item-wrapper {
									display: flex;
									flex-direction: row;
									flex-flow: wrap;

									.item-content {
										display: inline-block;
										padding: 15rpx 35rpx;
										border-radius: 10rpx;
										background-color: #ffffff;
										color: #333333;
										font-size: 28rpx;
										margin-right: 20rpx;
										border: 2rpx solid #f4f4f4;
										box-sizing: border-box;

										&.actived {
											border-color: #fe3a3a;
											color: #fe3a3a;
										}

										&.noactived {
											background-color: #f4f4f4;
											border-color: #f4f4f4;
										}
									}
								}
							}
						}
					}

					.close {
						position: absolute;
						top: 30rpx;
						right: 25rpx;
						width: 50rpx;
						height: 50rpx;
						text-align: center;
						line-height: 50rpx;

						.close-item {
							width: 50rpx;
							height: 50rpx;
						}
					}
				}

				.btn-wrapper {
					display: flex;
					width: 100%;
					height: 120rpx;
					flex: 0 0 120rpx;
					align-items: center;
					justify-content: space-between;
					padding: 0 26rpx;
					box-sizing: border-box;

					.layer-btn {
						width: 335rpx;
						height: 76rpx;
						border-radius: 38rpx;
						color: #fff;
						line-height: 76rpx;
						text-align: center;
						font-weight: 500;
						font-size: 28rpx;

						&.add-cart {
							background: #ffbe46;
						}

						&.buy {
							background: #fe3a3a;
						}
					}

					.sure {
						width: 698rpx;
						height: 76rpx;
						border-radius: 38rpx;
						color: #fff;
						line-height: 76rpx;
						text-align: center;
						font-weight: 500;
						font-size: 28rpx;
						background: #fe3a3a;
					}
				}
			}

			@keyframes showPopup {
				0% {
					opacity: 0;
				}

				100% {
					opacity: 1;
				}
			}

			@keyframes hidePopup {
				0% {
					opacity: 1;
				}

				100% {
					opacity: 0;
				}
			}

			@keyframes showLayer {
				0% {
					transform: translateY(120%);
				}

				100% {
					transform: translateY(0%);
				}
			}

			@keyframes hideLayer {
				0% {
					transform: translateY(0);
				}

				100% {
					transform: translateY(120%);
				}
			}
		}
	}
</style>
